<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>
        通过循环按行顺序为一个5×5的二维数组a赋1到25的自然数，然后输出该数组。试编程。<br>
        // 结果<br>
        [<br>
        [1, 2, 3, 4, 5],<br>
        [6, 7, 8, 9, 10],<br>
        [11, 12, 13, 14, 15],<br>
        [16, 17, 18, 19, 20],<br>
        [21, 22, 23, 24, 25]<br>
        ]<br>
    </div>
    <div>
        <input type="text" id="num1">
        <input type="text" id="num2">
        <button id="btn">确认</button>
        <div id="res">

        </div>
    </div>
    <script>
        var arr1 = new Array(); //定义一个新数组
        for ( var i = 0 ; i < 5 ; i ++ ){//行循环
            var arr2 = new Array();//定义一个辅助数组
            for( var j = 0 ; j < 5 ; j ++ ){//列循环
                arr2[j] = i * 5 + j + 1 ;//列中的数字与行列的关系式
            }
            arr1[i] = arr2;//将辅助数组赋值给一个一维数组的每一个元素
        }
        console.log(arr1);

        
        // 封装一个a行b列的二维数组，并将二维数组的值依次按行增加
        function createArr(a,b){//封装一个函数。传入两个形参，分别是二维数组的行和列
            var arr1 = new Array();//创建一个数组  等同于  var arr1 = [] ;
            for ( var i = 0 ; i < a ; i ++ ){//行循环
                var arr2 = new Array();//创建一个辅助数组arr2   等同于 var arr2 = [] ;
                for( var j = 0 ; j < b ; j ++ ){//列循环 
                    arr2[j] = i * b + j + 1 ;//辅助数组中的值和行数列数的关系
                }
                arr1[i] = arr2 ;//将辅助数组赋值给一维数组的每一个元素
            }
            return arr1 ;
        }
        var num1Ele = document.getElementById("num1");
        var num2Ele = document.getElementById("num2");
        var btn = document.getElementById("btn");

        btn.onclick = function () {
            var a = parseInt(num1Ele.value);
            var b = parseInt(num2Ele.value);
            document.getElementById("res").innerHTML =  createArr(a,b);
        }
    </script>
</body>
</html>